import React from "react";
import { StyleSheet, Text, View, Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useTheme } from "@/hooks/useTheme";
import { Category } from "@/types/question";

interface CategoryCardProps {
  id: Category;
  name: string;
  count: number;
}

export default function CategoryCard({ id, name, count }: CategoryCardProps) {
  const { colors } = useTheme();
  
  const handlePress = () => {
    router.push(`/category/${id}`);
  };

  const getIcon = () => {
    const iconProps = { size: 24, color: colors.primary };

    switch (id) {
      case "javascript":
        return <Ionicons name="logo-javascript" {...iconProps} />;
      case "typescript":
        return <Ionicons name="code-slash" {...iconProps} />;
      case "react":
        return <Ionicons name="logo-react" {...iconProps} />;
      case "vue":
        return <Ionicons name="logo-vue" {...iconProps} />;
      case "node":
        return <Ionicons name="server-outline" {...iconProps} />;
      case "css":
        return <Ionicons name="logo-css3" {...iconProps} />;
      case "html":
        return <Ionicons name="logo-html5" {...iconProps} />;
      case "performance":
        return <Ionicons name="speedometer-outline" {...iconProps} />;
      case "design-patterns":
        return <Ionicons name="cube-outline" {...iconProps} />;
      case "engineering":
        return <Ionicons name="cog-outline" {...iconProps} />;
      case "mini-programs":
        return <Ionicons name="phone-portrait-outline" {...iconProps} />;
      default:
        return <Ionicons name="code-slash-outline" {...iconProps} />;
    }
  };
  
  return (
    <Pressable
      style={({ pressed }) => [
        styles.card, 
        { 
          backgroundColor: colors.card,
          borderColor: colors.border,
        },
        pressed && { 
          opacity: 0.8,
          backgroundColor: colors.Pressable.background,
        }
      ]}
      onPress={handlePress}
    >
      <View style={styles.iconContainer}>{getIcon()}</View>
      <View style={styles.content}>
        <Text style={[styles.name, { color: colors.text }]}>{name}</Text>
        <Text style={[styles.count, { color: colors.subtext }]}>{count}个问题</Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: "rgba(99, 102, 241, 0.1)",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 16,
  },
  content: {
    flex: 1,
  },
  name: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 4,
  },
  count: {
    fontSize: 14,
  },
});
